<template>
  <h2 v-if="route.query.contractStatus=='3'" 
    style="background-color: bisque;width: 80px;color: red;">已拒绝</h2>
  <h2 v-if="route.query.contractStatus=='2'" 
    style="background-color: bisque;width: 80px;color: red;">已通过</h2>
  <div align="center">
    <h2>查看(通过或拒绝)</h2><br>
    <table>
      <tr>
        <td>
          <el-form-item label="合同标题：" style="font-size: 20px;float: right;">
            <el-input v-model="form.contracTitle" style="width: 300px;height: 40px;"
            placeholder="请输入合同标题" disabled />
          </el-form-item>
        </td>
        <td v-if="route.query.classify=='2'">
          <el-form-item label="货主单位："style="font-size: 20px;float: right;">
            <el-input v-model="form.ownerUnit" style="width: 300px;height: 40px;"
            placeholder="请输入货主单位" disabled />
          </el-form-item>
        </td>
        <td v-if="route.query.classify=='3'">
          <el-form-item label="承运单位："style="font-size: 20px;float: right;">
            <el-input v-model="form.carrierUnit" style="width: 300px;height: 40px;"
            placeholder="请输入承运单位" disabled />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td v-if="route.query.classify=='3'">
          <el-form-item label="承运负责人："style="font-size: 20px;float: right;">
            <el-input v-model="form.carrierName" style="width: 300px;height: 40px;"
            placeholder="请输入承运负责人" disabled />
          </el-form-item>
        </td>
        <td v-if="route.query.classify=='2'">
          <el-form-item label="货主负责人："style="font-size: 20px;float: right;">
            <el-input v-model="form.ownerName" style="width: 300px;height: 40px;"
            placeholder="请输入货主负责人" disabled />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="线路："style="font-size: 20px;float: right;">
            <el-select v-model="form.line" style="width: 300px;height: 40px;" disabled>
            <el-option v-for="item in lines" :key="item.lineId" :label="item.lineName" :value="item.lineName" />
          </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="吨运价："style="font-size: 20px;float: right;">
            <el-input v-model="form.freight" style="width: 300px;height: 40px;"
            placeholder="请输入吨运价" disabled />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="包车条件吨位："style="font-size: 20px;float: right;">
            <el-input v-model="form.tonnage" style="width: 300px;height: 40px;"
            placeholder="请输入包车条件吨位" disabled />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="包车金额："style="font-size: 20px;float: right;">
            <el-input v-model="form.charterAmount" style="width: 300px;height: 40px;"
            placeholder="请输入包车金额" disabled />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="经办人："style="font-size: 20px;float: right;">
            <el-input v-model="form.handlingName" style="width: 300px;height: 40px;"
            placeholder="请输入经办人" disabled />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="签订时间："style="font-size: 20px;float: right;">
            <el-date-picker v-model="form.signedTime" type="date" 
              placeholder="请选择签订时间" disabled  style="width: 300px;height: 40px;" 
              value-format="YYYY-MM-DD"/>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="合同金额："style="font-size: 20px;float: right;">
            <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;"
            placeholder="请输入合同金额" disabled />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同标的或项目说明" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;" >
          <el-input v-model="form.projectExplain" type="textarea" style="font-size: 20px;width: 970px;"
            disabled></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同主要条款/边更条款" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;">
          <el-input v-model="form.projectArticle" type="textarea" style="font-size: 20px;width: 970px;"
           disabled></el-input>
          </el-form-item>
        </td>
      </tr>
      <td style="font-size: 20px;float: left;margin-left: 50px;margin-top: 25px;">合同文本(附件)：</td>
      <td style="float: left; margin-left: 30px;width: 200px;">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="ContractRead/api/ReadContract/UpdateFile" disabled>
        </el-upload><br>
      </td>
    </table>
      <hr><br>
      <h3>审批结果</h3>
      <el-table :data="tableData" border style="width:800px">
      <el-table-column prop="results" label="审批结果" width="200" align="center"/>
      <el-table-column prop="remarks" label="备注" width="200" align="center"/>
      <el-table-column prop="approvaDate" label="审批时间" width="200" align="center">
        <template v-slot="scope">
          <span>{{ (scope.row.approvaDate).substring(0,10) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="approvaName" label="审批人" width="200" align="center"/>
      </el-table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive } from 'vue'
import {ref} from 'vue'
import { useRoute } from 'vue-router';
const route=useRoute()
const form = reactive({
  contractNumber:'HZ202010080122',
  contractId:route.query.contractId,
  contracTitle:'',
  //承运
  carrierName:'',
  carrierUnit:'',
  //货主
  ownerName:'',
  ownerUnit:'',
  line:'',
  signedTime:'',
  freight:'',
  tonnage:'',
  charterAmount:'',
  handlingName:'',
  contractAmount:'',
  projectExplain:'',
  projectArticle:'',
  contractFile:'',
  classify:route.query.classify
})
onMounted(()=>{
  GetContracted()
  //线路下拉框
  GetAllline()
  //审批记录
  GetRecording()
})
//线路
const lines:any=ref([])
const GetAllline=()=>{
  axios.get('FoundationRead/api/Foundation/GetLine', {
    params: {
      pageIndex:1,
      pageSize:10
    }
  }).then((ret) => {
    console.log(ret.data.data)
    lines.value=ret.data.data.plist
  })
}
//货主合同查看详情
const GetContracted=()=>{
  axios.get('ContractRead/api/ReadContract/GetContracted', {
    params: {
      contractId:form.contractId
    }
  }).then((ret) => {
    console.log(ret.data.data)
    form.contracTitle=ret.data.data.contracTitle
    form.ownerUnit=ret.data.data.ownerUnit
    form.ownerName=ret.data.data.ownerName
    form.line=ret.data.data.line
    form.freight=ret.data.data.freight
    form.tonnage=ret.data.data.tonnage
    form.charterAmount=ret.data.data.charterAmount
    form.signedTime=ret.data.data.signedTime
    form.handlingName=ret.data.data.handlingName
    form.contractAmount=ret.data.data.contractAmount
    form.projectExplain=ret.data.data.projectExplain
    form.projectArticle=ret.data.data.projectArticle
    localStorage.setItem('contractFile',ret.data.data.contractFile)
    kk()
    //承运
    form.carrierUnit=ret.data.data.carrierUnit
    form.carrierName=ret.data.data.carrierName
  })
}
const fileList=ref()
const kk=()=>{
  const file = ref([
  {
    name: localStorage.getItem('contractFile'),
    url: 'ContractRead/Imge/'+localStorage.getItem('contractFile'),
  }
  ])
  fileList.value=file.value
}
//审批记录
const tableData=ref([])
const GetRecording=()=>{
  axios.get('ContractRead/api/ReadContract/RecordingGetAll', {
    params: {
      contractId:form.contractId
    }
  }).then((ret) => {
    console.log(ret.data.data)
    tableData.value=ret.data.data
  })
}
</script>

<style scoped>

</style>